/**
  学习目标：Todos 案例
    需求0：✅拆分组件单独维护
    需求1：✅创建store，初始化list，并能在组件中访问list
    需求2：✅抽取reducer.js与初始化状态，并准备数据。
    需求3: ✅渲染列表、处理选中状态和样式
    需求4: ✅更新一条数据选中状态
    需求5: ✅删除一条数据
    需求6: ✅Footer组件，点谁谁有边框
    需求5：Footer组件，点击切换显示数据
    需求6： 清除已完成任务
    需求7:  统计剩余未完成任务
    需求8: 新增任务功能 - 完成新增功能
    注意：
      1. 按回车才新增数据
      2. 按esc，清除输入框内容
      3. 新增后清除输入框内容
      4. 如果数据为空，提示用户，且不添加数据
    需求9：数据缓存功能
    需求10：全选功能-小选影响全选
    需求11：全选功能-全选影响小选
 */
import React from 'react';
import Footer from './components/Footer';
import Header from './components/Header';
import Main from './components/Main';
import './styles/base.css';
import './styles/index.css';
import { useSelector } from 'react-redux';

export default function App() {
  // 1.4 使用useSelector函数，获取状态list
  const list = useSelector((state) => state.list);
  console.log('list  ----->  ', list);
  return (
    <section className="todoapp">
      {/* 头部 */}
      <Header />
      {/* 主体 */}
      <Main />
      {/* 底部 */}
      <Footer />
    </section>
  );
}
